<script>

import render from '@/utils/generator/render'

const layouts = {

  colFormItem(h, element, index, parent) {
    const {handleDownload, changeScore, setValue} = this.$listeners;
    let options = element.options;
    if(options){
    for (let option of options) {
      if (
        (option.label == "其他" || option.label == "其它")
      ) {
        element.show_other = true;
      }
    }
    }

    return (

      <el-col span={element.span}
      >
        {element.show_history_btn &&
        <el-button type="success" icon="el-icon-check" circle style="float:left;position: relative;z-index: 1;"
                   nativeOnClick={event => {
                     event.stopPropagation()
                   }}></el-button>}
        <el-form-item
          label={'(' + (index + 1) + ') ' + element.label} required={element.required}>

          <el-input-number v-model={element.grade} precision={1} min={0} step={0.5} max={element.score}
                           onChange={(event) => {
                             changeScore(element.questionId, event)
                           }} size="mini" style="float:right"></el-input-number>
          <br/>

          {element.records.length > 0 && <el-card className="box-card">{element.records.map((record, index) => {

            let obj = Object.assign({}, element)
            obj.defaultValue = JSON.parse(record.answer);

            return <div><h3 style="min-width:100px">{record.createBy + '的回答：'}</h3>

              {obj.tag == 'el-upload' && record.answer && record.answer.split(',').map((item, index) => {
                return <el-button nativeOnClick={(event) => {
                  handleDownload(item.replaceAll('"', ''));
                }}>{item.substring(item.lastIndexOf('/') + 1).replaceAll('"', '')}</el-button>
              })}

              {obj.tag != 'el-upload' && <render conf={obj} nativeOnClick={(event) => {
                event.stopPropagation()
              }} style="margin-left:20px"/>}
              {record.other.length > 0 && element.show_other&&
              <el-input className='desc' style="max-width:160px" placeholder="其他情况说明" value={record.other}></el-input>}
              {record.questionDesc.length > 0 &&
              <el-input type="textarea" className='desc' placeholder="问题情况说明" value={record.questionDesc}></el-input>}
            </div>
          })}</el-card>}

          {element.records.length == 0 && <el-card className="box-card">待作答</el-card>}

        </el-form-item>
      </el-col>
    )
  },
  rowFormItem(h, element, index, parent) {
    const {activeItem} = this.$listeners
    let child = renderChildren.apply(this, arguments)
    if (element.type === 'flex') {
      child = <el-row type={element.type} justify={element.justify} align={element.align}>
        {child}
      </el-row>
    }
    return (
      <el-col span={element.span}>
        <el-row gutter={element.gutter} class={className}
        >
          <span class="component-name">{element.componentName}</span>
          <draggable list={element.children} animation={340} group="componentsGroup" class="drag-wrapper">
            {child}
          </draggable>
        </el-row>
      </el-col>
    )
  }
}

function renderChildren(h, element, index, parent) {
  if (!Array.isArray(element.children)) return null
  return element.children.map((el, i) => {
    const layout = layouts[el.layout]
    if (layout) {
      return layout.call(this, h, el, i, element.children)
    }
    return layoutIsNotFound()
  })
}

function layoutIsNotFound() {
  throw new Error(`没有与${this.element.layout}匹配的layout`)
}

function handleBlur(element) {
  console.log(element.defaultValue)
  element.show_history_btn = true;
}

function showOther(element) {
  console.log(element.defaultValue)
  element.show_history_btn = true;
}

export default {
  components: {
    render,
  },
  props: [
    'element',
    'index',
    'drawingList',
    'activeId',
  ],


  render(h) {
    const layout = layouts[this.element.layout]

    if (layout) {
      return layout.call(this, h, this.element, this.index, this.drawingList)
    }
    return layoutIsNotFound()
  }
}
</script>
<style lang='scss'>

</style>
